<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>评论列表页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/modules/layui/css/layui.css}" media="all">
    <link rel="icon" type="shortcut icon" th:href="@{/assets/img/file.png}"/>
    <link rel="stylesheet" th:href="@{/assets/modules/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/assets/modules/dtree/font/dtreefont.css}">
    <link rel="stylesheet" th:href="@{/assets/css/common.css}">
</head>
<style type="text/css">
    .comment_list {
        padding-top:40px;
        width:700px;
        margin:0 auto;
    }
    .comment_details {
        float:left;
    }
    .comment_content {
        margin-top:10px;
        font-size:16px;
    }
    .comment_add_or_last {

        margin:0 auto;
        clear: both;
        width:600px;
        height:40px;
        background: #F0F0F0;
        text-align: center;
        line-height: 40px;   //行高（与div保持同高，垂直居中写法）
    }
    .imgdiv{
        float:left;

    }
    .imgcss {
        width:50px;
        height:50px;
        border-radius: 50%;
    }
    .comment_name {
        margin-left:10px;
        color:#3D9EEA;
        font-size:15px;
        font-weight: bolder;
    }
    .date{
        margin-left: 10px;
        font-size: 10px;
        color: grey;
    }
</style>
<body >
<div class="header">
    <div class="layui-container">
        <div class="layui-logo">
            <img th:src="@{/assets/img/file.png}"/><cite><span class="layui-hide-xs">文件服务器</span></cite>
        </div>
    </div>

    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:void(0)" id="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
        </li>
        <li class="layui-nav-item" lay-unselect>
            <div th:switch="${loginUser.getNickName()}">
                <div th:case="管理员">
                    <a><img th:src="@{/assets/img/006.jpg}" class="layui-nav-img"><cite
                            th:utext="${loginUser.nickName}"></cite></a>
                </div>
                <div th:case="普通用户">
                    <a><img th:src="@{/assets/img/016.jpg}" class="layui-nav-img"><cite
                            th:utext="${loginUser.nickName}"></cite></a>
                </div>
                <div th:case="行如火">
                    <a><img th:src="@{/assets/img/120.jpg}" class="layui-nav-img"><cite
                            th:utext="${loginUser.nickName}"></cite></a>
                </div>
                <div th:case="*">
                    <a><img th:src="@{/assets/img/062.jpg}" class="layui-nav-img"><cite
                            th:utext="${loginUser.nickName}"></cite></a>
                </div>
            </div>
            <dl class="layui-nav-child">
                <dd lay-unselect><a href="javascript:void(0)" id="logout" data-url="/logout"><i class="layui-icon layui-icon-logout"></i>退出</a>
                </dd>
            </dl>
        </li>
    </ul>
</div>

<!--<a href="https://gitee.com/" target="_blank" class="github-corner" aria-label="View source on GitHub">-->
<!--    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgb(64, 201, 198); color:#fff; position: absolute; top: 60px; border: 0; right: 0;" aria-hidden="true">-->
<!--        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>-->
<!--        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>-->
<!--        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>-->
<!--    </svg>-->
<!--</a>-->

<div class="layui-container" style="padding-top: 15px;">
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tvFP">/</span><span id="tvFPId" hidden>/</span></div>
        <div class="layui-card-body">
            <div class="btnDiv">
                <button  class="layui-btn layui-btn-sm layui-btn-primary icon-btn" id="returnHome"><i class="layui-icon">&#xe65c;</i>返回首页
                </button>
                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon">&#xe669;</i>刷新
                </button>
            </div>
            <hr>
<!--            <div class="file-list">-->

<!--            </div>-->
            <div class="comment_list">
                <h2>说点什么吧......</h2>
                <hr>
                <from class="layui-form-item layui-form-text" id="addMessageForm" lay-filter="addMessageForm">
                    <input type="hidden" name="fileId" />
                    <div th:switch="${loginUser.getNickName()}">
                        <div th:case="管理员">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/006.jpg}"/></div>
                        </div>
                        <div th:case="普通用户">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/016.jpg}"/></div>
                        </div>
                        <div th:case="行如火">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/120.jpg}"/></div>
                        </div>
                        <div th:case="*">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/062.jpg}"/></div>
                        </div>
                    </div>
                    <span class="comment_name" th:text="${loginUser.getNickName()}"> </span>

                    <div class="layui-input-block">
                        <textarea placeholder="请输入留言内容......" class="layui-textarea" name="remark"></textarea>
                    </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="MessageBtn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                    </div>
                </div>
                </from>
                <h2 >全部评论</h2>
                <hr>
                <div class="comment" id="comment" th:each="message :${messageList}">
                    <div th:switch="${message.userId}">
                        <div th:case="1">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/006.jpg}"/></div>
                        </div>
                        <div th:case="2">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/016.jpg}"/></div>
                        </div>
                        <div th:case="3">
                            <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/120.jpg}"/></div>
                        </div>
                    </div>
                    <div class="conmment_details">
                                    <div th:switch="${message.userId}">
                                        <span class="comment_name" th:case="1">管理员 </span>
                                        <span class="comment_name" th:case="2">普通会员 </span>
                                        <span class="comment_name" th:case="3">行如火 </span>
                                    </div>
                        <div class="comment_content" th:text="${message.remark}"></div>
                        <div class="date" th:text="${#dates.format(message.remarkTime,'yyyy-MM-dd HH:mm')}"> </div>
                    </div>
                    <hr>
                </div>

<!--                <div class="comment">-->
<!--                    <div class="imgdiv"><img class="imgcss"  th:src="@{/assets/img/006.jpg}"/></div>-->
<!--                    <div class="conmment_details">-->
<!--                        <span class="comment_name" >大白 </span>-->
<!--                        <div class="comment_content" >  很好，值得表扬！</div>-->
<!--                        <div class="date" >2021年7月21日 22:31 </div>-->
<!--                    </div>-->
<!--                    <hr>-->
<!--                </div>-->

            <div class="comment_add_or_last" >
                没有更多评论了
            </div>
        </div>
    </div>
</div>
</div>
<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a shiro:hasPermission="file:view" id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
        <li><a shiro:hasPermission="file:delete" id="del" style="color: red !important;"><i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i>&nbsp;&nbsp;&nbsp;删除&emsp;</a></li>
    </ul>
</div>
<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-list-item" data-id="{{item.id}}" data-dir="{{item.isDir}}" data-url="{{item.url}}" data-name="{{item.name}}">
        <div class="file-list-img">
            {{# if(item.isImg){ }}
            <img src="{{item.url}}"/>
            {{# }else{ }}
            <img src="assets/img/fti/{{item.type}}.png"/>
            {{# } }}
        </div>
        <div class="file-list-name">
            {{# if(item.isDir){ }}
            {{item.name}}
            {{# }else{ }}
            {{item.name}}.{{item.suffix}}
            {{# } }}
        </div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="list-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <div>没有文件</div>
    </div>
    {{# } }}
</script>
    <script type="text/javascript" th:src="@{/assets/modules/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/assets/modules/clipboard.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/index.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/message.js}"></script>
</body>


<!--<script type="text/javascript">-->
<!--    layui.use(['form','layer','jquery','element','laypage','form'],function(){-->
<!--        var form = layui.form();-->
<!--        window.layer = layui.layer;-->
<!--        layedit = layui.layedit;-->
<!--        window.jQuery = window.$ = layui.jquery;-->

<!--        var element = layui.element(),-->
<!--            form = layui.form(),-->
<!--            laypage = layui.laypage;-->
<!--        //删除用户-->
<!--        $(document).on('click', '.del_comment', function() {-->
<!--            var id = $(this).attr("data-id");-->
<!--            alert(typeof id);-->
<!--            $(this).closest('.comment').css("display", "none");-->
<!--        });-->

<!--        $(document).on('click', '.comment_add_or_last', function() {-->
<!--            add();-->
<!--            $(this).html( "点击加载更多");-->
<!--        });-->

<!--        function  delComment(id) {-->
<!--            alert(id);-->
<!--        }-->
<!--        function  add() {-->
<!--            var s = " ";-->
<!--            s += '<div class="comment">';-->
<!--            s += '<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>';-->
<!--            s += '<div class="conmment_details">';-->
<!--            s +=  '<span class="comment_name">大白 </span>     <span>22分钟前</span>';-->
<!--            s += 	'<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>';-->
<!--            s += 	'<div class="del"> <i class="icon layui-icon"  >赞(164)</i>';-->
<!--            s += 	'<a class="del_comment"  data-id="1"><i class="icon layui-icon" >删除</i></a></div></div><hr></div>';-->
<!--            $('.comment_list').append(s);-->
<!--        }-->
<!--    });-->
<!--</script>-->
</html>
